<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
    <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
    <meta name="author" content="FreeHTML5.co" />
    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/style.css">


    <!-- Modernizr JS -->
    <script src="js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<%@ include file="WEB-INF/partials/elm_start.jsp" %>

<div class="container">
    <div class="row" style="width: 100%; margin-left:30%;">
        <div class="col-md-4 col-md-offset-4">

            <!-- Start Sign In Form -->
            <form action="<%=request.getContextPath()%>/user-enroll" method="post" class="fh5co-form animate-box" data-animate-effect="fadeIn">
                <h2>注册</h2>
                <div class="form-group">
                    <label class="sr-only">用户名</label><br>
                    <input type="text" title="请输入用户名称" placeholder="用户名" name="userName" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">邮箱</label><br>
                    <input type="email" title="请输入邮箱号码" placeholder="邮箱" name="userEmail" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">电话号码</label><br>
                    <input type="tel" title="请输入电话号码" placeholder="电话号码" name="userTel" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">账号</label><br>
                    <input type="number" title="请输入账号" placeholder="账号" name="userAccount" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">密码</label><br>
                    <input type="password" title="请输入密码" placeholder="密码" name="userPassword" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">确认密码</label><br>
                    <input type="password" title="确认密码" placeholder="密码" name="userRpassword" required>
                </div>
                <div class="form-group">
                    <label class="sr-only">性别</label><br>
                    <input type="radio" title="请选择性别" placeholder="性别" name="sex" value="男" required> 男
                    <input type="radio" title="请选择性别" placeholder="性别" name="sex" value="女"> 女
                </div>
                <div class="form-group">
                    <label class="sr-only">出生日期</label><br>
                    <input type="date" title="请输入出生日期" placeholder="出生日期" name="userBirthday">
                </div>
                <div class="form-group">
                    <label class="sr-only">头像</label><br>
                    <input type="file" title="请上传头像" placeholder="头像" alt="头像" id="cover" name="avatar" accept=".png">
                </div>
                <div class="form-group">
                    <label class="sr-only">个人介绍</label><br>
                    <textarea title="请输入个人介绍里" placeholder="个人介绍" name="introduce"></textarea>
                </div>
                <div class="form-group">
                    <p>已有账号？ <a href="login.jsp">去登录</a>
                </div>
                <div class="form-group">
                    <button style="width: 100px" type="submit" class="btn btn-primary">注册</button>
                </div>
            </form>
            <!-- END Sign In Form -->

        </div>
    </div>
</div>

<%@ include file="WEB-INF/partials/_end.jsp" %>
</body>
<script>
    new Cherry({
        id: 'markdown-container',
        value: '',
        toolbars: {
            // 定义顶部工具栏
            //toolbar: ['bold','italic','strikethrough','|','color','header','ruby','|','list','panel','detail'],
            // 定义侧边栏，默认为空
            sidebar: ['theme'],
            // 定义顶部右侧工具栏，默认为空
            toolbarRight: ['fullScreen', 'export'],
            // 定义选中文字时弹出的“悬浮工具栏”，默认为 ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color']
            bubble: false,
            // 定义光标出现在行首位置时出现的“提示工具栏”，默认为 ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code']
            float: false,
        },
        callback: {
            afterChange: (text, html) => {
                document.getElementById('content').value = text;
            }
        },
        fileUpload: (file, callback) => {
            const formData = new FormData();
            formData.append('image', file);
            fetch('<%=request.getContextPath()%>/upload-image', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        callback(data.file.url);
                    } else {
                        console.error('图片上传失败:', data.message);
                        alert('图片上传失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('图片上传出错:', error);
                    alert('图片上传出错，请稍后重试');
                });
        },
    });
</script>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Placeholder -->
<script src="js/jquery.placeholder.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</html>